<template>

<view class="content" >
<!-- <view class="tem_status_bar">-->
    <!-- 这里是状态栏 -->
<!-- </view>
<view class="tem_navigation"> -->
    <!-- 这里是状态栏 -->
<!-- </view> --> 
	<form @submit="formSubmit" @reset="formReset">
<view class="main_container" :style="'height: '+(emulator_Height-88)+'rpx;  width:750rpx;'"> 

	
			<view class="inputView">
				<image src="/static/Banner-left.jpg" style="width: 750rpx;height: 260rpx;"></image>
			</view>
           
            <view class="inputView" >
              <view >登录名:</view>
			    <view class="uni-form-item uni-column" >
				<input  class="uni-input" name="input" v-model="loginname" placeholder="请输入用户名" />
			  </view>
              </view>

             <view  class="inputView" >
               <view>密 码:</view>
			   <view class="uni-form-item uni-column" >
				<input class="uni-input" name="inputPwd" v-model="password" placeholder="请输入密码" />
			   </view>
              </view>
              
             <view  class="inputView" >

				<button type="default" formType="submit">登录</button>
				<button formType="reset">重置</button>
			</view>
           
	
	</view>

   </form>
</view>
</template>
<script>
export default {
    
    data(){
        return {
           emulator_Height:0
        }
    },
    onShow(){
        // #ifdef MP-WEIXIN  
        if(wx.hideHomeButton){  
            wx.hideHomeButton();  
         } 
         var that=this  
         // #endif
        uni.getSystemInfo({
                success: function(res) {
                    console.log(res.screenHeight); //屏幕高度  注意这里获得的高度宽度都是px 需要转换rpx
                    console.log(res.windowWidth); //可使用窗口宽度
                    console.log(res.windowHeight); //可使用窗口高度
                    console.log(res.screenWidth); //屏幕宽度
                    that.emulator_Height = (res.screenHeight * (750 / res.windowWidth)); //将px 转换rpx
                     console.log("rpx*********"+that.emulator_Height)
               }
        });
    },
    onLoad()
    {
        //uni.hideTabBar();

    }

}
</script>
<style>
   .content{
      background-color:#5e0b1d;
      width: 750rpx;
      height: 100%;
   }
  .tem_status_bar {
      height: var(--status-bar-height);
      background-color: #5e0b1d;
      width: 100%;
  }
  .tem_navigation {
     width: 750rpx;
     height: 88rpx;
     background-color: #0609db;
     display: flex;
     position: fixed;
     top: calc(100% - 88rpx - constant(safe-area-inset-top));
     left: 0;
     z-index: 99;
}

   
   .main_container{
       background-color:#ffffff;
       padding: 0rpx;
       width: 750rpx;
       /*height:100%;*/
       /* margin-top: 0rpx; */
       /* flex布局*/
       /*6个设置在容器的属性
       一：flex-direction 属性决定主轴的方向（即项目的排列方向）
       row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。
        column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
       二：flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
       nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
       三：flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
       四：justify-content 属性定义了项目在主轴上的对齐方式。
       flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 
       space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
       五： align-items 属性定义项目在交叉轴上如何对齐。
       flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。
       baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
       六：align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
       flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。
       center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
      space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
       stretch（默认值）：轴线占满整个交叉轴。
       */
       flex-direction:row;
       flex-wrap: wrap;
       justify-content: flex-start;
       

       display: -webkit-flex; /*Safari */
       display: flex;
      
        /* */
       
   }

   .main_container .inputView{
       width: 750rpx;
       display: -webkit-flex;
       display: flex;
       justify-content:space-around;
       background-color: aqua;
       flex-basis: 100%;
       align-items:center;
       margin-top: 20rpx;  
       margin-bottom: 0rpx;
       padding: 0rpx;
   }

   



	.uni-form-item .title {
		padding: 20rpx 0;
	}


	.uni-btn-v {
		/* margin-top: 150px; */
	}

</style>